<template>
	<view>
		<!-- <view class="topBg" @click="goRoute('/subpackages/companyIntro/companyIntro')">
			<image src="https://wxapp-normal.oss-accelerate.aliyuncs.com/api/image/banner1.png" mode="widthFix"></image>
		</view> -->
		<view class="swiperBox">
			<u-swiper imgMode="contain" autoplay circular indicator indicatorMode="dot" height="250"
				:list="swiperList"></u-swiper>
		</view>
		<view class="contentBox">
			<view class="boxTop" @click="goRoute('/subpackages/companyIntro/companyIntro')">
				<view class="topLeft">
					<image src="/static/images/home/icon5.png" mode="widthFix"></image>
					<text>立即成为合伙人</text>
				</view>
				<view class="topRight">
					<text>去签约</text>
					<image src="/static/images/home/icon6.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="navBox">
				<view class="navItem" @click="openCompany">
					<p>
						<image src="/static/images/home/icon1.png" mode="widthFix"></image>
					</p>
					<text>公司介绍</text>
				</view>
				<view v-for="(item,index) in navList" :key="index" class="navItem" @click="checkGo(item)">
					<p>
						<image :src="item.img" mode="widthFix"></image>
					</p>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="scroll_box" v-if="scrollList.length > 0">
			<view class="scroll_box_header">
				结算单信息
			</view>
			<view class="scroll_box_body" :style="[scrollHeight]">
				<TableScrollVue :columns="[
				    { title: '代理人', key: 'agentName', width: '60px' },
				    { title: '结算电量(千瓦时)', key: 'settlementElectricityConsumption'},
				    { title: '结算金额(元)', key: 'intermediateAmount', color: 'red'  },
				    { title: '结算时间', key: 'years', width: '60px' }
				  ]" :data="scrollList" interval="1500" row-height="44" />
			</view>
		</view>
		<view class="noticeBox" style="margin-bottom: 80rpx;">
			<view class="noticeTitle noticeTitle1" @click="goRoute('/subpackages/policyInfo/policyInfo')">
				<p>售电政策信息</p>
				<p>
					<text>更多</text>
					<u-icon name="arrow-right" color="#FF8A3B" size="13" bold></u-icon>
				</p>
			</view>
			<view class="noticeBar">
				<p @click="openPdf(item.url)" v-for="(item,index) in policyList" :key="index"><text
						style="color: #FF7728;">{{index+1}}</text> <text>{{item.theme}}</text> </p>
			</view>
		</view>
		<view class="noticeBox">
			<view class="noticeTitle noticeTitle2" @click="goRoute('/subpackages/knowledgeExpansion/knowledgeExpansion')">
				<p>知识拓展</p>
				<p>
					<text>更多</text>
					<u-icon name="arrow-right" color="#0355E5" size="13" bold></u-icon>
				</p>
			</view>
			<scroll-view :show-scrollbar="false" class="srollBox" style="width: 690rpx" scroll-x="true" direction="horizontal"
				v-if="knowledgeList.length">
				<view v-for="(item,index) in knowledgeList" class="scrollItem"
					@click="goRoute('/subpackages/knowledgeExpansion/detail',{id:item.id})" :key="index">
					<view class="">
						<image :src="(index+1)%2==0?'/static/images/home/icon9.png':'/static/images/home/icon10.png'"
							mode="widthFix"></image>
						<text>{{index+1}}</text>
					</view>

					<p>{{item.theme}}</p>
					<p>
						<text>{{item.createTime.substring(0,10)}}</text>
						<text>···</text>
					</p>
				</view>
			</scroll-view>
		</view>
		<view class="caseBox" v-if="videoShow">
			<view class="boxTitle" @click="goRoute('/subpackages/case/case')">
				<p>视频号</p>
				<p>
					<text>更多</text>
					<u-icon name="arrow-right" bold color="#999" size="13"></u-icon>
				</p>
			</view>
			<view class="listBox" v-if="caseList1.length">
				<view class="listItem" @click="openDetail(item)" v-for="(item,index) in caseList1" :key="index">
					<image :src="item.caseCover" mode="widthHeight"></image>
					<view class="">
						<view class="">
							{{item.caseTitle}}
						</view>
						<!-- 	<view class="">
							<u-icon name="heart-fill" size="13" color="#fff"></u-icon>
							<text>2</text>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="infoBox" v-if="videoShow">
			<view class="boxTitle" @click="goRoute('/subpackages/case/case',{type:1})">
				<p>行业信息</p>
				<p>
					<text>更多</text>
					<u-icon name="arrow-right" color="#648ACA" size="13" bold></u-icon>
				</p>
			</view>
			<view class="listBox" v-if="caseList2.length">
				<view class="listItem" @click="openDetail(item)" v-for="(item,index) in caseList2" :key="index">
					<view class="item1">
						<text>{{item.caseTitle}}</text>
						<image
							:src="item.caseCover?item.caseCover:'https://wxapp-normal.oss-accelerate.aliyuncs.com/api/image/蒙版组t5t2xtt1t.png'"
							mode="widthFix"></image>
					</view>
					<view class="item2">
						<text>兆友售电 · {{item.createTime.substring(0,10)}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="infoBox" style="margin-top: 20rpx;">
			<view class="boxTitle" @click="goRoute('/subpackages/case/case',{type:1})">
				<p>联系方式</p>
				<p>
				</p>
			</view>
			<view class="navBox2">
				<view class="codeItem">
					<view class="codeItemTop">
						<p>
							<text>客服</text>
							<text>客服二维码</text>
						</p>
						<image src="/static/images/home/text1.png" mode="widthFix"></image>
					</view>
					<view class="codeItemBottom">
						<image :src="serviceCode" @click="previewImg(serviceCode)" mode="widthFix"></image>
					</view>
				</view>
				<view class="codeItem">
					<view class="codeItemTop">
						<p>
							<text>视频号</text>
							<text>关注视频号</text>
						</p>
						<image src="/static/images/home/text2.png" mode="widthFix"></image>
					</view>
					<view class="codeItemBottom">
						<image :src="videoData.url" @click="previewImg(videoData.url)" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view v-show="videoPlay">
			<video controls id="myvideo" :src="videoUrl" @fullscreenchange="screenChange"></video>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import TableScrollVue from '../../../components/TableScroll.vue';
	export default {
		components: {
			TableScrollVue
		},
		data() {
			return {
				videoUrl: '',
				videoPlay: false,
				swiperList: ['/static/image/home/banner.png', '/static/image/home/banner.png',
					'/static/image/home/banner.png'
				],
				list1: [{
					name: '案例视频',
				}, {
					name: '案例信息',
				}],
				navList: [{
						img: '/static/images/home/icon2.png',
						name: '诚招合伙人',
						path: '/subpackages/companyIntro/companyIntro',
					},
					{
						img: '/static/images/home/icon3.png',
						name: '网签流程',
						path: '/subpackages/operationalFlow/operationalFlow'
					},
					{
						img: '/static/images/home/icon4.png',
						name: '用户权益',
						path: '/subpackages/userRights/userRights',

					},
				],
				policyList: [],
				knowledgeList: [],
				serviceCode: [],
				companyPdf: '',
				caseList1: [],
				caseList2: [],
				videoData: {},
				videoShow: false,
				scrollList: []
			};
		},
		created() {
			this.getServiceCode()
			this.gzKnowledgeExpand()
			this.gzPolicyDocument()
			this.gzPicture()
			this.gzFollowVideoAccount()
			this.getCompanyInfo()
			this.queryGzVideoConfig()
			this.getCaseList(1)
			this.getCaseList(2)
			this.getScrollList()
			if (this.isLogin()) {
				this.getUserInfo()
			}
			console.log(getCurrentPages(), 'getCurrentPages');
		},
		computed: {
			scrollHeight() {
				if (this.scrollList.length > 3) {
					return {
						height: '400rpx'
					}
				} else {
					return {
						maxHeight: '400rpx'
					}
				}
			}
		},
		methods: {
			...mapActions({
				getUserInfo: 'getUserInfo'
			}),
			checkGo(item) {
				if (item.check) {
					this.goLogin(item.path)
				} else {
					this.goRoute(item.path)
				}
			},
			openCompany() {
				// this.openPdf(this.companyPdf)
				this.previewImg(this.companyPdf)
			},
			// 获取视频号显示配置
			queryGzVideoConfig() {
				this.$api.queryGzVideoConfig().then(res => {
					console.log(res)
					if (res.data.result.isConfig == 1) {
						this.videoShow = true
						this.$store.commit('editConfig', true)
					}
				})
			},

			screenChange(e) {
				let fullScreen = e.detail.fullScreen; // 值true为进入全屏，false为退出全屏
				if (!fullScreen) {
					//退出全屏
					this.videoPlay = false; // 隐藏播放盒子
				}
			},
			// 获取二维码
			getServiceCode() {
				this.$api.getServiceCode({
					pageNo: 1,
					pageSize: 10
				}).then(res => {
					if (res.data.code == 200) {
						this.serviceCode = res.data.result.records[0]?.link
					}
				})
			},
			openDetail(e) {
				if (e.caseType == 2) {
					this.goRoute('/subpackages/case/detail', {
						id: e.id
					})
				} else {
					this.videoContext = uni.createVideoContext("myvideo", this);
					this.videoUrl = e.casePath;
					this.videoContext.requestFullScreen({
						direction: 0
					});
					this.videoContext.play();
					this.videoPlay = true; // 显示播放盒子
				}
			},
			// 获取知识拓展数据
			gzKnowledgeExpand() {
				this.$api.gzKnowledgeExpand({
					pageNo: 1,
					pageSize: 5
				}).then(res => {
					if (res.data.code == 200) {
						this.knowledgeList = res.data.result.records
					}
				})
			},
			// 获取政策
			gzPolicyDocument() {
				this.$api.gzPolicyDocument({
					pageNo: 1,
					pageSize: 5
				}).then(res => {
					if (res.data.code == 200) {
						this.policyList = res.data.result.records
					}
				})
			},
			// 获取轮播图
			gzPicture() {
				this.$api.gzPicture({
					pageNo: 1,
					pageSize: 10
				}).then(res => {
					if (res.data.code == 200) {
						this.swiperList = res.data.result.records
					}
				})
			},
			// 获取视频号
			gzFollowVideoAccount() {
				this.$api.gzFollowVideoAccount({
					pageNo: 1,
					pageSize: 10
				}).then(res => {
					if (res.data.code == 200) {
						this.videoData = res.data.result.records[0]
					}
				})
			},
			getCompanyInfo() {
				this.$api.getCompanyInfo({
					pageNo: 1,
					pageSize: 10
				}).then(res => {
					if (res.data.code == 200) {
						this.companyPdf = res.data.result.records[0].companyUrl
					}
				})
			},
			getCaseList(type) {
				this.$api.getCaseList({
					pageNo: 1,
					pageSize: 4,
					caseType: type,
				}).then(res => {
					if (res.data.code == 200) {
						if (type == 1) {
							this.caseList1 = res.data.result.records
						} else {
							this.caseList2 = res.data.result.records
						}
					}
				})
			},

			getScrollList() {
				this.$api.apiGetScrollList().then(res => {
					console.log(res, 'res');
					if (res.data.code == 200) {
						this.scrollList = (res.data.result || []).map(item => {
							if (typeof item.agentName === 'string') {
								console.log(item.agentName, 'item.agentName');
								let len = item.agentName.length;
								item.agentName = item.agentName.slice(0, 1) + Array.from({
									length: len - 1
								}, () => "*").join("")
							}
							return item
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'home.scss'
</style>
<style>
	page {
		background-color: #F5F5F5;
		padding-bottom: 20rpx;
		/* #ifdef H5 */
		padding-bottom: 170rpx;
		/* #endif */
	}
</style>